<template>
	<view class="">
		<view class="cont"></view>
			<view class="padding bg-fff">
				<view class="text-center" @click="handleUser">
					<img class="avatar" src="../../static/logo.png" alt="">
				</view>
				<view class="fs-28 text-center">
					{{username}}
				</view>
				<view class="flex grid">
					<view v-for="(item,index) in gridArr" class="flex flex-direction align-center padding">
						<text :class="['iconfont margin-bottom-xs',item.icon]"></text>
						{{item.name}}
					</view>
					<view v-for="(item,index) in gridArr" class="flex flex-direction align-center padding">
						<text :class="['iconfont margin-bottom-xs',item.icon]"></text>
						{{item.name}}
					</view>
					
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gridArr:[
					{
						icon:"icon-wodedingdan",
						name:'我的订单'
					},
					{
						icon:"icon-daishouhuo",
						name:'待收货'
					},
					{
						icon:"icon-daifukuan",
						name:'待付款'
					},
					{
						icon:"icon-huiyuandengji",
						name:'会员等级'
					},
				]
			}
		},
		computed: {
			username() {
				let {userInfo} = this.$store.state.user
				let name = userInfo ? userInfo.username : '尚未登录'
				return  name
			}
		},
		methods: {
			handleUser(){
				uni.navigateTo({
					url:'/pages/user/login'
				})
			}
		}
	}
</script>

<style lang="scss">
.cont{
	background-color: #f6f6f6;
	height: 400upx;
}
.grid .iconfont{
	font-size: 60upx;
	color: #888;
}
.avatar{
	width: 150upx;
	height: 150upx;
	border-radius: 50%;  //圆角
	margin-top: -75upx;
}
.padding.bg-fff{
	margin-top: -200upx;
}
</style>
